<template>
  <div>
    <el-dialog title="密码修改" :visible.sync="dialogVisible" width="50%" :append-to-body="true">
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <!-- <el-form-item label="账号" prop="loginname">
            <el-input v-model="form.loginname" placeholder="请输入账号" autocomplete="off"></el-input>
          </el-form-item> -->
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="yzm">
            <el-input
              v-model="form.yzm"
              placeholder="请输入验证码"
              type="number"
              class="yzm"
              autocomplete="off"
            >
              <el-button slot="append" type="primary" @click="sendYzm">{{time>0?time+"s":"发送验证码"}}</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="password2">
            <el-input
              v-model="form.password2"
              placeholder="请输入新密码"
              type="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认新密码" prop="password3">
            <el-input
              v-model="form.password3"
              placeholder="请再次输入密码"
              type="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible=false">关 闭</el-button>
        <el-button type="primary" @click="updatePwd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updatePwd, sendYzm } from "@/api/user";
import { getUserid } from "@/api/admin";
export default {
  created() {},
  data() {
    return {
      dialogVisible: false,
      form: {
        password2: "",
        password3: "",
        yzm: "",
        phone: "",
        userid: 0
      },
      timer: null, //定时器
      time: 0, //60秒倒计时
      yzm: "", //发送的验证码
      rules: {
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: this.validatorLoginname
          }
        ],
        // loginname: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.validatorLoginname
        //   }
        // ],
        password2: [
          {
            required: true,
            trigger: "blur",
            validator: this.validator
          }
        ],
        password3: [
          {
            required: true,
            trigger: "blur",
            validator: this.validator
          }
        ],
        yzm: [
          {
            required: true,
            trigger: "blur",
            validator: this.validatorYzm
          }
        ]
      }
    };
  },
  methods: {
    //父组件调用
    show() {
      this.dialogVisible = true;
    },
    //更新密码
    updatePwd() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          let r = await updatePwd({
            userid: this.form.userid,
            password: this.form.password2
          });
          if (r && r.error == 0) {
            this.$message({
              message: "密码修改成功",
              type: "success"
            });
            this.dialogVisible = false;
          } else {
            this.$message({
              message: "密码修改失败，请重试",
              type: "error"
            });
          }
        } else {
          return false;
        }
      });
    },
    async sendYzm() {
      if (!this.form.userid) {
        this.$message({
          message: "请输入账号",
          type: "error"
        });
        return;
      }
      if (!this.form.phone) {
        this.$message({
          message: "请输入手机号",
          type: "error"
        });
        return;
      }
      let r = await sendYzm({
        userid: this.form.userid,
        phone: this.form.phone
      });
      if (r && r.error == 0) {
        this.$message({
          message: "验证码已发送",
          type: "success"
        });
        this.yzm = r.yzm;
        this.startTimer();
      } else {
        this.$message({
          message: "发送验证码失败，请重试",
          type: "error"
        });
      }
    },
    startTimer() {
      if (this.time > 0) {
        return;
      }
      this.time = 60;
      this.timer = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    destroyed() {
      clearInterval(this.timer);
      this.timer = null;
    },
    validatorYzm(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else if (value != this.yzm) {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    },
    async validatorLoginname(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入原密码"));
      } else {
        let r = await getUserid({ loginname: value.trim() });
        if (r && r.error == 0) {
          this.form.userid = r.userid;
          callback();
        } else {
          callback(new Error("手机号不存在，请联系单位管理员修改密码或绑定手机号"));
        }
      }
    },
    validator(rule, value, callback) {
      if (!value || value.trim().length < 6) {
        callback(new Error("密码至少6位"));
      } else if (this.checkStrength(value) < 3) {
        callback(new Error("密码至少包含大小写字母、数字、特殊字符"));
      } else if (
        rule.field == "password3" &&
        this.form.password2 != this.form.password3
      ) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    },
    //密码强度检查
    checkStrength(val) {
      var lv = 0;
      if (val.match(/[a-z]/g)) {
        lv++;
      }
      if (val.match(/[A-Z]/g)) {
        lv++;
      }
      if (val.match(/[0-9]/g)) {
        lv++;
      }
      if (val.match(/[~!@#\$%^&*\(\)\{\};,.\?\/'"]/g)) {
        lv++;
      }
      return lv;
    }
  }
};
</script>
<style lang="scss">
.el-input-group__append button {
  width: 120px;
}
.yzm {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>